import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import app1 from './App.js';





// 轮播图
import caImg1 from './image/prd/IMG_0175.JPG';
import caImg2 from './image/prd/IMG_0167.JPG';

import img1 from './image/prd/58B_1.jpg';

// clents
import app from './image/clientImg/app.jpg';
import bbca from './image/clientImg/bbca.jpg';
import cnsg from './image/clientImg/cnsg.jpg';
import cofco from './image/clientImg/cofco.jpg';
import evonik from './image/clientImg/evonik.jpg';
import giti from './image/clientImg/giti.jpg';
import lekai from './image/clientImg/lekai.jpg';
import rsp from './image/clientImg/rsp.jpg';

import Alert from "./components/alert/alert.jsx";


// 事件信息
const home =()=>{
    alert('welcome');
};



const open=()=>{
    Alert.open({
        alertTip:"这是一个测试弹框",
        closeAlert:function(){
            console.log("关闭了...");
        }
    });
}


const element = (
    <div>
        <nav className="navbar navbar-expand-sm bg-light navbar-light">
            <a className="navbar-brand" href="javascript:void(0)">
                <h3 style={{fontFamily:'FangSong'}}>武汉琳琅精机</h3>
            </a>
            <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                <span className="navbar-toggler-icon"></span>
            </button>
            <div className="collapse navbar-collapse" id="collapsibleNavbar">
                <div style={{width:'500px'}}></div>
                <ul className="navbar-nav">
                    <li className="nav-item">
                        <a className="nav-link" href="javascript:void(0)"
                        onClick={home}><strong>首页</strong></a>
                    </li>
                    <li className="nav-item dropdown">
                        <a className="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">关于</a>
                        <div className="dropdown-menu">
                            <a className="dropdown-item" href="javascript:void(0)">介绍</a>
                            <a className="dropdown-item" href="javascript:void(0)">新闻</a>
                            <a className="dropdown-item" href="javascript:void(0)">产品</a>
                        </div>
                    </li>
                    <li className="nav-item">
                        <a className="nav-link" href="javascript:void(0)">产品</a>
                    </li>
                    <li className="nav-item">
                        <a className="nav-link" href="javascript:void(0)">问答</a>
                    </li>
                    <li className="nav-item">
                        <a className="nav-link" href="javascript:void(0)">联系</a>
                    </li>
                </ul>
            </div>
        </nav>

        <div className="container">
            <div id="myCarousel" className="carousel slide" data-ride="carousel">
                {/*<ul className="carousel-indicators">*/}
                    {/*<li data-target="#myCarousel" data-slide-to="0" className="active"></li>*/}
                    {/*<li data-target="#myCarousel" data-slide-to="1"></li>*/}
                    {/*<li data-target="#myCarousel" data-slide-to="2"></li>*/}
                {/*</ul>*/}
                <div className="carousel-inner">
                    <div className="carousel-item active">
                        <img src={caImg1} style={{height:'300px'}}/>
                    </div>
                    <div className="carousel-item">
                        <img src={caImg2} style={{height:'300px'}}/>
                    </div>
                    <div className="carousel-item">
                        <img src={caImg2} style={{height:'300px'}}/>
                    </div>
                </div>

                {/*// 左右切换按钮*/}
                <a className="carousel-control-prev" href="#myCarousel" data-slide="prev">
                    <span className="carousel-control-prev-icon">*</span>
                </a>
                <a className="carousel-control-next" href="#myCarousel" data-slide="next">
                    <span className="carousel-control-next-icon">*</span>
                </a>

                {/*<div className="flex-container">*/}
                    {/*<div className="flex-item">information</div>*/}
                    {/*<div className="flex-item">product</div>*/}
                    {/*<div className="flex-item">Question</div>*/}
                {/*</div>*/}


            </div>
        </div>

        <div className="bgCla">
            <div className="container" id="myContainer">
                <div className="card" id="myCard">
                    <div className="card-body">
                        <h3 style={{textAlign:'center',fontWeight:'200',color:'#384200'}}>Welcome to YALAN Seals</h3>
                        <p style={{textAlign:'center'}}>YALAN Sales is a China-based organization,
                            which has its own manufacturing factory and design company,
                            supplying high quality and affordable mechanical seals and components.
                            No matter if your industry is sewage treatment, papermaking,
                            chemical engineering, oil refining, machinery manufacturing,
                            pharmacy, painting and printing, refrigeration, food, agrochemicals pesticide,
                            or electricity generation and any other industry
                            that will need pumps and seals,
                            we are confident we have the best pump seal
                            solution to meet your requirements.
                        </p>
                        <h3 style={{textAlign:'center',fontWeight:'200',color:'#384200'}}>Industrial Applications</h3>
                        <p style={{textAlign:'center'}}>Mechanical seals of YALAN are widely used in the industries below as very important machinery components.</p>

                        <div className="row">
                            <div className="col-md-4">
                                <div className="card mb-4 box-shadow">
                                    <img className="card-img-top" style={{height:'225px',width:'100%',display:'block'}} src={img1}/>
                                    <div className="card-body">
                                        <p className="card-text">This is a wider card with supporting text below as
                                            a natural lead-in to additional content. This content is a little bit
                                            longer.</p>
                                        <div className="d-flex justify-content-between align-items-center">
                                            <div className="btn-group">
                                                <button type="button"
                                                        className="btn btn-sm btn-outline-secondary">view
                                                </button>
                                            </div>
                                            <small className="text-muted">2018-12-15</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="col-md-4">
                                <div className="card mb-4 box-shadow">
                                    <img className="card-img-top" style={{height:'225px',width:'100%',display:'block'}} src={img1}/>
                                    <div className="card-body">
                                        <p className="card-text">This is a wider card with supporting text below as
                                            a natural lead-in to additional content. This content is a little bit
                                            longer.</p>
                                        <div className="d-flex justify-content-between align-items-center">
                                            <div className="btn-group">
                                                <button type="button"
                                                        className="btn btn-sm btn-outline-secondary">view
                                                </button>
                                            </div>
                                            <small className="text-muted">2018-12-15</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="col-md-4">
                                <div className="card mb-4 box-shadow">
                                    <img className="card-img-top" style={{height:'225px',width:'100%',display:'block'}} src={img1}/>
                                    <div className="card-body">
                                        <p className="card-text">This is a wider card with supporting text below as
                                            a natural lead-in to additional content. This content is a little bit
                                            longer.</p>
                                        <div className="d-flex justify-content-between align-items-center">
                                            <div className="btn-group">
                                                <button type="button"
                                                        className="btn btn-sm btn-outline-secondary">view
                                                </button>
                                            </div>
                                            <small className="text-muted">2018-12-15</small>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div className="col-md-4">
                                <div className="card mb-4 box-shadow">
                                    <img className="card-img-top" style={{height:'225px',width:'100%',display:'block'}} src={img1}/>
                                    <div className="card-body">
                                        <p className="card-text">This is a wider card with supporting text below as
                                            a natural lead-in to additional content. This content is a little bit
                                            longer.</p>
                                        <div className="d-flex justify-content-between align-items-center">
                                            <div className="btn-group">
                                                <button type="button"
                                                        className="btn btn-sm btn-outline-secondary">View
                                                </button>
                                            </div>
                                            <small className="text-muted">2018-12-15</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="col-md-4">
                                <div className="card mb-4 box-shadow">
                                    <img className="card-img-top" style={{height:'225px',width:'100%',display:'block'}} src={img1}/>
                                    <div className="card-body">
                                        <p className="card-text">This is a wider card with supporting text below as
                                            a natural lead-in to additional content. This content is a little bit
                                            longer.</p>
                                        <div className="d-flex justify-content-between align-items-center">
                                            <div className="btn-group">
                                                <button type="button"
                                                        className="btn btn-sm btn-outline-secondary">View
                                                </button>
                                            </div>
                                            <small className="text-muted">2018-12-15</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="col-md-4">
                                <div className="card mb-4 box-shadow">
                                    <img className="card-img-top" style={{height:'225px',width:'100%',display:'block'}} src={img1}/>
                                    <div className="card-body">
                                        <p className="card-text">This is a wider card with supporting text below as
                                            a natural lead-in to additional content. This content is a little bit
                                            longer.</p>
                                        <div className="d-flex justify-content-between align-items-center">
                                            <div className="btn-group">
                                                <button type="button"
                                                        className="btn btn-sm btn-outline-secondary">View
                                                </button>
                                            </div>
                                            <small className="text-muted">2018-12-15</small>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div className="col-md-4">
                                <div className="card mb-4 box-shadow">
                                    <img className="card-img-top" style={{height:'225px',width:'100%',display:'block'}} src={img1}/>
                                    <div className="card-body">
                                        <p className="card-text">This is a wider card with supporting text below as
                                            a natural lead-in to additional content. This content is a little bit
                                            longer.</p>
                                        <div className="d-flex justify-content-between align-items-center">
                                            <div className="btn-group">
                                                <button type="button"
                                                        className="btn btn-sm btn-outline-secondary">View
                                                </button>
                                            </div>
                                            <small className="text-muted">2018-12-15</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="col-md-4">
                                <div className="card mb-4 box-shadow">
                                    <img className="card-img-top" style={{height:'225px',width:'100%',display:'block'}} src={img1}/>
                                    <div className="card-body">
                                        <p className="card-text">This is a wider card with supporting text below as
                                            a natural lead-in to additional content. This content is a little bit
                                            longer.</p>
                                        <div className="d-flex justify-content-between align-items-center">
                                            <div className="btn-group">
                                                <button type="button"
                                                        className="btn btn-sm btn-outline-secondary">View
                                                </button>
                                            </div>
                                            <small className="text-muted">2018-12-15</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="col-md-4">
                                <div className="card mb-4 box-shadow">
                                    <img className="card-img-top" style={{height:'225px',width:'100%',display:'block'}} src={img1}/>
                                    <div className="card-body">
                                        <p className="card-text">This is a wider card with supporting text below as
                                            a natural lead-in to additional content. This content is a little bit
                                            longer.</p>
                                        <div className="d-flex justify-content-between align-items-center">
                                            <div className="btn-group">
                                                <button type="button"
                                                        className="btn btn-sm btn-outline-secondary">View
                                                </button>
                                            </div>
                                            <small className="text-muted">2018-12-15</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div className="container">
            <div className="card" id="clienCard">
                <h3 style={{textAlign:'center'}}>合作企业</h3>
                <div className="card-group">
                    <div className="card">
                        <img src={app}/>
                    </div>
                    <div className="card">
                        <img src={bbca}/>
                    </div>
                    <div className="card">
                        <img src={cnsg}/>
                    </div>
                    <div className="card">
                        <img src={cofco}/>
                    </div>
                </div>
                <div className="card-group">
                    <div className="card">
                        <img src={evonik}/>
                    </div>
                    <div className="card">
                        <img src={giti}/>
                    </div>
                    <div className="card">
                        <img src={lekai}/>
                    </div>
                    <div className="card">
                        <img src={rsp}/>
                    </div>
                </div>
            </div>
        </div>


        <footer className="main-footer">
            <div className="container" style={{width:'750px'}}>
                <div className="row">
                    <div className="col-sm-4">
                        <div className="widget">
                            <h4 className="title">官方</h4>
                            <div className="content tag-cloud friend-links">
                                <a href="https://shop67415y3c72440.1688.com/"
                                   target="https://shop67415y3c72440.1688.com/"
                                   title="相关网站">官方淘宝</a>
                            </div>
                        </div>
                    </div>

                    <div className="col-sm-4">
                        <div className="widget">
                            <h4 className="title">产品介绍</h4>
                            <div className="content tag-cloud friend-links">
                                <a href="https://www.huhnseal.com/"
                                   target="https://www.huhnseal.com/"
                                   title="相关网站">Huhnseal</a>
                            </div>
                        </div>
                    </div>

                    <div className="col-sm-4">
                        <div className="widget">
                            <h4 className="title">赞助商</h4>
                            <div className="content friend-links">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </footer>

        <div className="copyright">
            <div className="container">
                <div className="row">
                    <div className="col-sm-12">
                        <span>地址：武汉市武昌区中南二路12号</span>&nbsp;&nbsp;|&nbsp;&nbsp;
                        <span>武汉琳琅精机科技有限公司</span>
                    </div>
                    <div className="col-sm-12">
                        <span>Copyright © <a href="http://www.linlang-seals.com">linlang-seals</a></span> |
                        <span><a href="http://www.miibeian.gov.cn/" target="_blank">京ICP备11008151号</a></span>
                    </div>
                </div>
            </div>
        </div>

    </div>
);


// // 渲染到 自己的目录
ReactDOM.render(<app1/>,document.getElementById('root'));

registerServiceWorker();
